<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>环球甄选</title>
  <link rel="stylesheet" href="./static/css/common.css">
  <link rel="stylesheet" href="./static/css/skin.css">
  <link rel="stylesheet" href="./static/swiper/swiper.min.css">
  <script src="./static/jquery/jquery-1.11.3.min.js"></script>
  <script src="./static/swiper/swiper.min.js"></script>
</head>

<body>
  <div id="wrapper" style="background: #ffffff;">
    <div class="user-profile">
      <div class="bg"></div>
      <div class="inner" style="padding-top: 10px;">
        
      </div>
    </div>
    
    <div class="balance-show">
      <div class="inner">
        <div class="thead">
          <div class="name" id="balanceAccountMoney">
            <span>总余额（¥）</span>
            <strong data-num="8901.92">8901.92</strong>
          </div>
          <div class="icon" id="balanceAccountToggle">
            <img src="./static/icon/13.png" alt="">
            <span>隐藏</span>
          </div>
        </div>
        <dl class="tbody">
          <dd class="rows">
            <span class="btn-1">充值</span>
          </dd>
          <dd class="rows">
            <span class="btn-2">提现</span>
          </dd>
          <dd class="rows">
            <span class="btn-3">转账</span>
          </dd>
        </dl>
      </div>
    </div>
    
    <div class="balance-basic">
      <div class="thead">
        <div class="name">
          <span>全部</span>
        </div>
      </div>
      <dl class="tbody">
        <dd class="rows">
          <span>可用余额</span>
          <strong>999.99</strong>
        </dd>
        <dd class="rows">
          <span>锁定余额</span>
          <strong>0.00</strong>
        </dd>
        <dd class="rows">
          <span>红包余额</span>
          <strong>0.00</strong>
        </dd>
      </dl>
    </div>
    
    <div class="balance-links">
      <dl class="tbody">
        <dd class="rows" style="width: 96vw;">
          <span>可用余额明细</span>
          <i></i>
        </dd>
        <dd class="rows" style="width: 86vw;">
          <span>冻结余额明细</span>
          <i></i>
        </dd>
        <dd class="rows" style="width: 76vw;">
          <span>红包余额明细</span>
          <i></i>
        </dd>
      </dl>
    </div>

    <!-- other -->
  </div>

  <div id="fixedBar">
    <div class="inner">
      <dl class="list">
        <dd class="item">
          <div class="img">
            <img src="./static/icon/3.png" alt="">
          </div>
          <div class="name">
            <span>首页</span>
          </div>
        </dd>
        <dd class="item">
          <div class="img">
            <img src="./static/icon/4.png" alt="">
          </div>
          <div class="name">
            <span>商城</span>
          </div>
        </dd>
        <dd class="item">
          <div class="img">
            <img src="./static/icon/5.png" alt="">
          </div>
          <div class="name">
            <span>甄聊</span>
          </div>
        </dd>
        <dd class="item">
          <div class="img">
            <img src="./static/icon/6.png" alt="">
          </div>
          <div class="name">
            <span>乐园</span>
          </div>
        </dd>
        <dd class="item">
          <div class="img">
            <img src="./static/icon/7.png" alt="">
          </div>
          <div class="name">
            <span>我的</span>
          </div>
        </dd>
      </dl>
    </div>
  </div>

  <script src="./static/js/action.js"></script>
  
  <script>
    $('#balanceAccountToggle').on('click', function() {
      $('#balanceAccountToggle').toggleClass('is-hidden');
      if ($('#balanceAccountToggle').hasClass('is-hidden')) {
        $('#balanceAccountToggle').html(`
          <img src="./static/icon/13b.png" alt="">
          <span>显示</span>
        `)
        $('#balanceAccountMoney').find('strong').text(`***`);
      } else {
        $('#balanceAccountToggle').html(`
          <img src="./static/icon/13.png" alt="">
          <span>隐藏</span>
        `)
        const num = $('#balanceAccountMoney').find('strong').data('num');
        $('#balanceAccountMoney').find('strong').text(`${num}`);
      }
    });
  </script>
</body>
</html>
